<template>
    <div class="app-container">
        <!-- 条件搜索 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
            <el-form-item label="入库申请编号" prop="instoId">
                <el-input v-model="pagin.search.instoId" placeholder="请输入入库申请编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="订单编号" prop="stoId">
                <el-input v-model="pagin.search.stoId" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="审批状态" prop="instoState">
                <el-select v-model="pagin.search.instoState" placeholder="请选择" clearable>
                    <el-option v-for="dict in tatusList" :key="dict.typeId" :label="dict.typeName"
                        :value="dict.typeId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple"
                    @click="handleDeleteList">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 表格展示 -->
        <el-table v-loading="loading" :data="instoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="instoId" label="入库申请编号"></el-table-column>
            <el-table-column prop="stoId" label="订单编号"></el-table-column>
            <el-table-column prop="instoDate" label="申请日期"></el-table-column>
            <el-table-column label="审批状态" prop="instoState" :formatter="row => getStatusNameById(row.instoState)">
            </el-table-column>
            <el-table-column prop="warehouseName" label="入库仓库"></el-table-column>
            <el-table-column prop="instoActor" label="申请人"></el-table-column>
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="查询" placement="top">
                        <el-button type="text" icon="Search" @click="handleCheckGoods(scope.row)">查询
                        </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.instoState == 0" content="审批" placement="top">
                        <el-button type="text" icon="Finished" @click="checkApprove(scope.row)">
                            审批
                        </el-button>
                    </el-tooltip>

                    <el-tooltip content="删除" placement="top">
                        <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination class="pagiantion" @current-change="handleCurrentChange" :current-page="pagin.page"
                :page-size="pagin.count" layout="total, prev, pager, next, jumper" :total="pagin.total">
            </el-pagination>
        </div>
        <!-- 展示物品明细的弹框 -->
        <el-dialog v-if="open" :title="title" v-model="open" width="1000px" append-to-body>
            <!-- 物品明细搜索表单 -->
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
                <el-form-item label="商品编号" prop="productId">
                    <el-input v-model="queryParams.productId" placeholder="请输入商品编号" clearable style="width: 240px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable style="width: 240px"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="OrderQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 增删按钮 -->
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="Plus" @click="handleOpen('add')">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="Delete" :disabled="multiple"
                        @click="batch_handleDelete">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <!-- 物品明细表格 -->
            <el-table v-loading="OrderLoading" :data="GoodsList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="商品编号" align="center" prop="productId" />
                <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true" />
                <el-table-column label="商品类型" align="center" prop="productType" :show-overflow-tooltip="true" />
                <el-table-column label="商品品牌" align="center" prop="brand" />
                <el-table-column label="采购数量" align="center" prop="purchaseQuantity" />
                <el-table-column label="采购单价" align="center" prop="purchaseUnitPrice" />
                <el-table-column label="备注" align="center" prop="note" />
            </el-table>

            <!-- 分页插件 -->
            <pagination v-show="GoodsTotal > 0" :total="GoodsTotal" v-model:page="queryParams.page"
                v-model:limit="queryParams.count" @pagination="handleCheckGoods" />
        </el-dialog>
        <!-- 入库审批 -->
        <el-dialog title="入库申请审批" v-if="openTwo" v-model="form" width="600px" append-to-body>
            <el-form :model="form">
                <el-form-item label="入库申请编号" label-width="100px">
                    <el-input v-model="form.instoId" style="width: 400px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" label-width="100px">
                    <el-input v-model="form.stoId" style="width: 400px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="申请日期" label-width="100px">
                    <el-date-picker v-model="form.instoDate" style="width: 400px;" :disabled="true" type="date"
                        placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="入库仓库" label-width="100px">
                    <el-input v-model="form.instoWarehouse" style="width: 400px;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="申请人" label-width="100px">
                    <el-input v-model="form.instoActor" style="width: 400px;" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="approveFalse">审批拒绝</el-button>
                <el-button type="primary" @click="approveTrue">审批通过</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script setup name="Dept">
import { queryGoodsList } from "@/api/procurement/proclist";
import { listInSto, delInSto, approve, findTatus } from "@/api/reserve/insto";
import { getCurrentInstance, nextTick, reactive, ref } from "vue";
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
const instoList = ref([]);
const GoodsList = ref([]);
const open = ref(false);
const openTwo = ref(false);
const GoodsTotal = ref(0);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const tatusList = ref([]);

const data = reactive({
    appData: {

    },
    form: {

    },
    queryParams: {
        page: 1,
        total: 10,
        count: 5,
        search: {
            inventoryCountId: undefined,
        },
    },

    pagin: {
        page: 1,
        total: 10,
        count: 5,
        search: {
            instoId: undefined,
            stoId: undefined,
            instoState: undefined
        },
    },

    OrderCondition: {
        page: 1,
        count: 5,
        maxPage: 0,
        total: 0,
        index: 0,
        search: {
            productId: undefined,
            stoProId: undefined,
            productName: undefined,
            productType: undefined,
            brand: undefined,
            purchaseQuantity: undefined,
            purchaseUnitPrice: undefined,
            note: undefined,
        },
    },
});

const { queryParams, OrderCondition, appData, resultList, form, rules, pagin } = toRefs(data);

/** 查询入库申请列表 */
function getList() {

    loading.value = true;
    if (pagin.value.page == null) {
        pagin.value.page = 1;
    }
    listInSto(pagin.value).then(response => {
        instoList.value = response.data.list;
        pagin.value.page = response.data.pageNum;
        pagin.value.total = response.data.total;
        loading.value = false;

    });
}
//审批状态
function tatus() {
    findTatus().then(response => {
        tatusList.value = response.data;
        getList();
    })
}

//切换页码
function handleCurrentChange(currentPage) {
    pagin.value.page = currentPage; // 更新当前页码
    //执行查询
    getList();
}
/** 搜索按钮操作 */
function handleQuery() {
    if (pagin.value.page == null) {
        pagin.value.page = 1;
    }
    getList();
}

/** 删除入库申请按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.instoId + '"的数据项?').then(function () {
        return delInSto(row.instoId);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");

    }).catch(() => { });
}
/**查看物品明细 */
function handleCheckGoods(row) {
    open.value = true;
    title.value = "物品详单";
    OrderCondition.value.page = queryParams.value.page;
    OrderCondition.value.count = queryParams.value.count;
    OrderCondition.value.search.stoProId = row.stoId;
    queryGoodsList(OrderCondition.value).then((response) => {
        GoodsList.value = response.data.list;
        GoodsTotal.value = response.data.total;
    });
}
/**搜索物品详情表格信息 */
function OrderQuery() {
    OrderCondition.value.search.productId = queryParams.value.productId;
    OrderCondition.value.search.productName = queryParams.value.productName;
    queryGoodsList(OrderCondition.value).then((response) => {
        GoodsList.value = response.data.list;
        GoodsTotal.value = response.data.total;
        clearForm();
    });
}
// 清空表单
const clearForm = () => {
    OrderCondition.value.search.productId = undefined;
    OrderCondition.value.search.productName = undefined;
    OrderCondition.value.search.productType = undefined;
    OrderCondition.value.search.brand = undefined;
    OrderCondition.value.search.purchaseQuantity = undefined;
    OrderCondition.value.search.purchaseUnitPrice = undefined;
    OrderCondition.value.search.note = undefined;
};

// 打开审批窗
function checkApprove(row) {
    form.value = row;
    openTwo.value = true;
}

function approveTrue() {
    form.value.instoState = 1;
    approve(form.value).then(response => {
        ElMessage.success(response.meta.msg);
        openTwo.value = false;
    }).catch(error => {
        console.error('Failed to fetch warehouse data:', error);
    });

}
function approveFalse() {
    form.value.instoState = 2;
    approve(form.value).then(response => {
        ElMessage.success(response.meta.msg);
        openTwo.value = false;
    }).catch(error => {
        console.error('Failed to fetch warehouse data:', error);
    });
}

function getStatusNameById(cellValue) {
    for (const status of tatusList.value) {
        if (status.typeId == cellValue) {
            console.log(status.typeName)
            return status.typeName;
        }
    }
    // 如果没有找到匹配的项，可以返回一个默认值或者null
    return null; // 或者 'Unknown', 或者其他你认为合适的值
}
tatus();
// setInterval(getList, 10000);
// onBeforeUnmount(() => {
//     // 清除定时器
//     clearInterval(setInterval(getList, 10000));
// });
</script>